<template>
  <div class="footer_nav">
    <van-tabbar v-model="data.footerActive" :route="true" @change="onChange">
      <van-tabbar-item name="Home" replace to="/home">
        <span>工作台</span>
        <template #icon="props">
          <img v-if="props.active" src="../../assets/images/workAction.png" />
          <img v-else src="../../assets/images/work.png" alt="" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item name="Classify" replace to="/classify">
        <span>消息</span>
        <template #icon="props">
          <van-badge :content="unreadNum" v-if="unreadNum != 0">
            <img v-if="props.active" src="../../assets/images/shenpiAction.png" />
            <img v-else src="../../assets/images/shenpi.png" alt="" />
          </van-badge>
          <div v-else>
            <img v-if="props.active" src="../../assets/images/shenpiAction.png" />
            <img v-else src="../../assets/images/shenpi.png" alt="" />
          </div>
        </template>
      </van-tabbar-item>
      <van-tabbar-item name="My" replace to="/my">
        <span>我的</span>
        <template #icon="props">
          <img v-if="props.active" src="../../assets/images/mineAction.png" />
          <img v-else src="../../assets/images/mine.png" alt="" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup name="footerNav">
import { watch, nextTick } from 'vue'
import { setMessageNum } from '../../util/util'
let data = reactive({
  footerActive: 'Home',
  dot: false,
})
const unreadNum = ref($globalStore.useCommon.message_num)
// const unreadNum = computed(() => {
//   return useCommon.message_num
// })

watch(
  () => $globalStore.useCommon.message_num,
  (num) => { unreadNum.value = num, console.log(num, 'num'); }
)
const onChange = async () => {
  const res = await $globalStore.useCommon.getMessageNum()
  if (res.code == 0) {
    setMessageNum(res.data)
    nextTick()
  }
}
</script>
